<template>
  <div class="side-info">
    <div class="step-box">
      <!-- <div class="margin-bottom-sm">
          <span class="top-line-icon"></span>
          <span class="text-df">质控轨迹</span>
        </div> -->
      <el-steps direction="vertical" :active="activeIndex">
        <template v-for="(item, index) in processList" :key="index">
          <el-step
            :title="item.name"
            :icon="statusIcon(item.result)"
            :class="{
              'step-red-icon': item.result > 2,
            }"
          >
            <template #title>
              <div class="step-title">
                <div class="title-icon">
                  <img
                    v-if="item?.assigneeUser?.avatar"
                    class="step-uimg"
                    :src="item?.assigneeUser?.avatar"
                    alt=""
                  />
                </div>
                <div
                  class="title-name over-text"
                  :class="{
                    'text-main-green': item.result === 2,
                    'text-main-red': item.result > 2,
                  }"
                >
                  {{ item.name }}
                </div>
              </div>
            </template>
            <template #description>
              <div class="step-description">
                <div v-if="item.result === 1" class="text-gray padding-left-xl"> 处理中 </div>
                <div v-else>
                  <div>
                    <div class="step-value nickname">
                      {{ item?.assigneeUser?.nickname }}
                    </div>
                    <div class="step-value over-text">
                      {{ item?.assigneeUser?.deptName }}
                    </div>
                    <div class="step-value">
                      {{ item.updateTime }}
                    </div>
                    <div v-if="item.reason" class="reason-box">
                      <div class="gray-title">
                        {{ handleShowReason(item.reason, 1) }}
                      </div>
                    </div>
                    <div v-if="handleShowReason(item.reason, 2)" class="reason-box">
                      <div class="gray-title">
                        整改措施：{{ handleShowReason(item.reason, 2) }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </el-step>
        </template>
      </el-steps>
    </div>
  </div>
</template>
<script>
  import { CircleCloseFilled, SuccessFilled } from '@element-plus/icons-vue';
  // import { parseTime } from '@/utils/ruoyi'

  export default {
    name: 'RightSideItem',

    props: {
      processList: {
        type: Array,
        default: () => [],
      },
    },
    emits: ['showCheckModal'],
    data() {
      return {
        nodeList: [],
      };
    },
    computed: {
      activeIndex() {
        return this.processList.filter((x) => x.result > 1).length;
      },
    },
    methods: {
      showReasonModal(params) {
        this.$emit('showCheckModal', params);
      },
      statusIcon(index) {
        const iconObj = {
          1: '',
          2: SuccessFilled,
          3: CircleCloseFilled,
          4: CircleCloseFilled,
        };
        return iconObj[index];
      },
      handleShowReason(params, type) {
        let res = params?.split('|');
        let isList = Array.isArray(res);
        if (type === 2) {
          return res?.length > 1 && isList ? res[1] : '';
        }

        if (res.length && isList) {
          return res.length > 1 ? `原因分析：${res[type - 1]}` : res[0];
        }
        return res;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .side-info {
    width: 478px;
    height: 100%;
    background-color: #fff;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  .step-uimg {
    width: 32px;
    height: 32px;
    border-radius: 50%;
  }
  .step-box {
    margin-top: 30px;
    padding-left: 15px;

    // height: 200px;
    ::v-deep(.el-step__main) {
      padding-left: 0;
    }
    .step-value {
      font-size: 12px;
      margin-left: 44px;
      color: #666666;
    }
    .nickname {
      font-size: 14px;
      color: #333;
    }
    .step-title {
      display: flex;
      align-items: center;
      .title-icon {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: #d9d9d9;
        margin-right: 12px;
      }
      .title-name {
        font-size: 15px;
        font-weight: normal;
      }
    }
    ::v-deep(.el-step__main .el-step__description) {
      margin-left: 10px;
      padding-bottom: 20px;
    }
    ::v-deep(.el-step__title.is-wait) {
      color: #999999;
    }
    ::v-deep(.el-step__title.is-process) {
      color: #666;
    }
  }
  .top-line-icon {
    display: inline-block;
    width: 6px;
    height: 12px;
    background: rgb(75, 176, 141);
    margin-right: 10px;
  }
  .reason-box {
    background: #f8f9f9;
    border-radius: 2px;
    padding: 10px 12px;
    margin: 5px 0px 0px;
    color: #666666;
  }
  .gray-title {
    color: rgba(0, 0, 0, 0.65);
  }
  ::v-deep(.el-step__main .el-step__title) {
    margin-left: 10px;
  }
  .over-text {
    width: 170px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .step-red-icon {
    ::v-deep(.el-step__head.is-finish) {
      color: #d32f2f;
    }
  }
</style>
